<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.go(-1)" />

    <van-search
      v-model="key"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- 历史记录 -->
    <van-cell-group v-if="!key">
      <van-cell title="历史记录" />
      <van-cell
        v-for="(item, index) in historyList"
        :key="index"
        :title="item"
      />
    </van-cell-group>

    <!-- 联想结果 -->
    <van-cell-group v-else>
      <van-cell v-for="(item, index) in colorList" :key="index" icon="search">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { suggestAPI } from '@/api'
export default {
  data() {
    return {
      key: '',
      suggestList: [],
      // 历史记录数组,从本地存储读取，如果本地存储就给空数组
      historyList: JSON.parse(window.localStorage.getItem('hm81-history')) || []
    }
  },
  methods: {
    onSearch() {
      if (this.key) {
        // 把搜索的关键字先加到数组里，再存数组到本地存储
        // 如果历史记录里以前没保存过这个搜索关键字才存起来
        if (this.historyList.includes(this.key) == false ) {
          this.historyList.push(this.key)
          window.localStorage.setItem(
            'hm81-history',
            JSON.stringify(this.historyList)
          )
        }

        this.$router.push('/search/result/' + this.key)
      }
    },

    async onInput() {
      // 不为空发请求
      if (this.key) {
        // 拿到输入的内容发请求获取联想建议
        let res = await suggestAPI({
          q: this.key
        })

        if (res.data.data.options[0] == null) {
          this.suggestList = []
        } else {
          this.suggestList = res.data.data.options
        }
      }
    }
  },

  computed: {
    colorList() {
      // 要根据服务器返回的数组重新得到一个新数组
      // 新数组长度要跟服务器返回的数组长度一样，既然如此，用map方法
      return this.suggestList.map((v) => {
        // 对v进行处理：把搜索的关键字包成一个span
        // 我希望忽略大小写以及能替换所有，就得用正则表达式
        let reg = new RegExp(this.key, 'ig')

        return v.replace(reg, `<span style="color:red">${this.key}</span>`)
      })
    }
  }
}
</script>

<style></style>
